<template>
  <div class="L-base-list">

    <van-empty v-if="loading===false && list.length===0" description="没有数据" />

    <!-- 骨架屏 -->
    <div v-if="loading">
      <van-skeleton title :row="3" v-for="item in 5" :key="item" style="margin-bottom:30px" />
    </div>

    <!-- 列表 -->
    <van-list v-else v-model:loading="loading" :finished="finished" :finished-text="list.length>0 ? '没有更多了':''" @load="onLoad">
      <div class="base-item" v-for="(item,index) in list" :key="index">
        <slot :itemData="item"></slot>
      </div>
    </van-list>

  </div>
</template>

<script setup lang="ts">
import { closeToast, showLoadingToast } from "vant";
import { onMounted, ref, watch, onUnmounted} from "vue";

import { apiConfigurable } from "@/request/api/api";

import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();

import emitter from "@/utils/emitter";

onMounted(() => {

  // mitt订阅
  emitter.on("listUpload", () => {
    initCondition();
    onLoad();
  });
});




onUnmounted(() => {
  // mitt解绑
  emitter.off("listUpload")
});

const list = ref([]);
const startline = ref(1);
const pagecount = ref(20); //每页条数
const loading = ref(false); //是否加载中
const finished = ref(false); //列表是否加载完成

const props = defineProps({
  loadapi: String,
  loadparams: Object,
});

watch(props,()=>{
  initCondition()
  onLoad()
})



//初始化查询条件
function initCondition() {
  startline.value = 1;
  finished.value = false;
  list.value = [];
}

function onLoad() {
  let params = {
    startline: startline.value,
    pagecount: pagecount.value,
  };


  const data = {...params,...props.loadparams}

  showLoadingToast({
    message: "加载中...",
    forbidClick: true,
    duration: 0,
  });

  loading.value = true;
  apiConfigurable(props.loadapi as string, data).then((res) => {
    if (res.data?.jsondata?.fieldValue.length < pagecount.value) {
      finished.value = true;
    }
    list.value = [...list.value, ...res.data?.jsondata?.fieldValue];
    startline.value = list.value.length + 1;
    closeToast();
    loading.value = false;
  });
}
</script>

<style scoped>
.L-base-list {
  background: #fff;
}

.L-base-list .base-item {
  padding: 15px;
  border-bottom: 1px solid #eee;
}
</style>